<template>
  <my-base-wraper>
    <base-header>
      <el-select
        v-model="listQuery.projectId"
        placeholder="请选择项目"
        @change="refreshTableData"
      >
        <el-option :value="undefined" label="全部" />
        <el-option
          v-for="item in projectList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      <el-select
        v-model="listQuery.dbDataSourceId"
        placeholder="请选择数据源"
        @change="refreshTableData"
      >
        <el-option :value="undefined" label="全部" />
        <el-option
          v-for="item in dataSourceList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      <el-button v-has="'query'" type="primary" @click="refreshTableData">
        查询
      </el-button>
      <template #right>
        <router-link to="/db/data-source">
          <el-button type="warning">查看数据库信息</el-button>
        </router-link>
        <el-button v-has="'add'" type="primary" @click="handleAdd">
          添加
        </el-button>
      </template>
    </base-header>

    <base-table-p
      ref="baseTable"
      api="cg_project_re_db.listPage"
      :params="listQuery"
    >
      <el-table-column
        label="ID"
        prop="projectReDbDataSourceId"
        align="center"
      />
      <el-table-column label="项目名称" prop="projectName" align="center" />
      <el-table-column
        label="数据源名称"
        prop="dbDataSourceName"
        align="center"
      />
      <el-table-column label="数据库名称" prop="dbName" align="center" />
      <el-table-column label="备注" prop="remark" align="center" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <my-base-delete-btn @ok="handleDelete(scope.row)" />
          <el-button type="text" plain @click="handleConnectTest(scope.row)">
            连接测试
          </el-button>
          <router-link
            :to="{
              path: '/codeGenerator/project-re-db/table',
              query: {
                projectReDbDataSourceId: scope.row.projectReDbDataSourceId
              }
            }"
          >
            <el-button type="text" plain>查看表</el-button>
          </router-link>
        </template>
      </el-table-column>
    </base-table-p>

    <base-dialog
      :visible.sync="dialogVisible"
      :title="titleMap[dialogStatus]"
      width="30%"
    >
      <el-form ref="dataForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item
          v-if="dialogStatus === 'update'"
          label="ID:"
          prop="projectReDbDataSourceId"
        >
          <el-input v-model="form.projectReDbDataSourceId" disabled />
        </el-form-item>
        <el-form-item label="所属项目ID:" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择项目">
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据源id:" prop="dbDataSourceId">
          <el-select v-model="form.dbDataSourceId" placeholder="请选择数据源">
            <el-option
              v-for="item in dataSourceList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据库名称:" prop="dbName">
          <el-input v-model="form.dbName" />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="5" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </base-dialog>
  </my-base-wraper>
</template>

<script>
export default {
  name: "CgProjectReDb",
  data() {
    return {
      dialogVisible: false,
      projectList: [],
      dataSourceList: [], // 数据源列表
      listQuery: {
        projectId: undefined, // 所属项目ID
        dbDataSourceId: undefined // 数据源id
      },
      form: {
        projectReDbDataSourceId: undefined, // 数据库ID
        projectId: undefined, // 所属项目ID
        dbDataSourceId: undefined, // 数据源id
        dbName: "", // 数据库名称
        remark: "" // 备注
      },
      dialogStatus: "",
      titleMap: {
        add: "添加",
        update: "编辑",
        detail: "详情"
      },
      rules: {}
    };
  },
  created() {
    this.getProjectList();
    this.getDataSourceList();
  },
  methods: {
    refreshTableData() {
      this.$refs.baseTable.refresh();
    },
    async getProjectList() {
      let res = await this.$api.cg_project.list({});
      this.projectList = res.data;
    },
    async getDataSourceList() {
      let res = await this.$api.st_db_data_source.list();
      this.dataSourceList = res.data;
    },
    async handleConnectTest(row) {
      let res = await this.$api.st_db_operate.connectTest(
        row.dbDataSourceId,
        row.dbName
      );
      this.submitOk(res.msg);
    },
    handleAdd() {
      this.form = Object.assign({}, {});
      this.dialogStatus = "add";
      this.dialogVisible = true;
    },
    handleUpdate(row) {
      this.form = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogVisible = true;
    },
    async handleDelete(row) {
      const res = await this.$api.cg_project_re_db.delete(
        row.projectReDbDataSourceId
      );
      this.refreshTableData();
      this.submitOk(res.message);
    },
    submitForm() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          const res = await this.$api.cg_project_re_db[
            this.form.projectReDbDataSourceId ? "update" : "add"
          ](this.form);
          this.refreshTableData();
          this.submitOk(res.message);
          this.dialogVisible = false;
        }
      });
    }
  }
};
</script>
<style scoped></style>
